<template>
	<view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#FB7A42" ></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<view class="allorder" v-for="(list,index) in getAllOrderList" :key="list.orderId">
					<view class="allorder-top">
						<view class="allorder-top-font">
							{{list.orderType}}
						</view>
						<view class="allorder-top-time">
							{{list.orderTime}}
						</view>
						<view class="allorder-top-jiantou" @tap="goOrderDetailYes(list.orderId)">
							>
						</view>
					</view>
					<view class="allorder-bottom">
						<view class="allorder-bottom-content">
							<view class="allorder-bottom-content-yes"  v-for="(item,index) in getAllOrderList[index].goods" :key="item.index">
								<view class="allorder-bottom-content-pic">
									<image :src="basUrl + item.pictureUrl" mode=""></image>
								</view>
								<view class="allorder-bottom-content-name">
									{{item.goodsName}}
								</view>
							</view>
						</view>
						<view class="allorder-bottom-shu">
							<view class="allorder-bottom-fone">
								共16件
							</view>
							<view class="allorder-bottom-money">
								￥68.8000
							</view>
						</view>
						<view class="allorder-state">
							配送中...
						</view>
						
					</view>
				</view>
				
				
				
			</view>
			<view v-show="current === 1">
				
				<view class="main">
						<view v-for="(packet, index) in csListArrl" :key="index" :data-index="index" class="order-item"
							@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+item.right+'px'">
							<view class="contenttwo">
								<view class="allordertwo" >
									<view class="allorder-top">
										<view class="allorder-top-font">
											{{packet.orderType}}
										</view>
										<view class="allorder-top-time">
											{{packet.orderTime}}
										</view>
										<view class="allorder-top-jiantou" @tap="goOrderDetail(packet.orderId)">
											>
										</view>
									</view>
									<view class="allorder-bottom" >
										<view class="allorder-bottom-content">
											<view class="allorder-bottom-content-yes" v-for="(item) in aaa" :key="index">
												<view class="allorder-bottom-content-pic">
													<image :src="basUrl+item.prictureUrl" mode=""></image>
												</view>
												<view class="allorder-bottom-content-name">
													{{item.goodsName}}
												</view>
											</view>
										</view>
										<view class="allorder-bottom-shu">
											<view class="allorder-bottom-fone">
												共16件
											</view>
											<view class="allorder-bottom-money">
												￥68.8000
											</view>
										</view>
										<view class="allorder-state">
											<view class="allorder-state-anotherorder">
												再来一单
											</view>
											<view class="allorder-state-immediateevaluation" @tap="toeValuate(packet.orderId)">
												立即评价
											</view>
										</view>
										
									</view>
								</view>
							</view>
							<view class="remove" @click="delData(item)">删 除</view>
							
						</view>
					</view>
				
				
			</view>
			<view v-show="current === 2">
				<view class="chargeback">
					<view class="chargeback-img">
						
					</view>
					<view class="no-order">
						暂无订单
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {basUrl} from "@/common/basUrl.js"
	import {getAllOrder,QueryOrdersNotEvaluated} from "@/api/home.js"
	export default {
		created() {
			this.getAllOrder()
			this.QueryOrdersNotEvaluated()
			// this.toeValuate()
		},
		data() {
			return {
				
			
				basUrl: basUrl,
				items: ['全部订单', '未评价', '退单'],
				current: 0,
				csListArrl: [],
				//左滑默认宽度
				delBtnWidth: 80,
				getAllOrderList:[],
				NotEvaluated:'',
				aaa: []
			};
		},

		methods: {
			//去评价
			toeValuate(id){
				// console.log("id",id);
				uni.navigateTo({
					url:"/pages/evaluate/evaluate?id="+id
				})
				// uni.setStorage({
				// 	key:"orderId",
				// 	data:this.id
				// })
			},
			//查询未评价订单
			QueryOrdersNotEvaluated(){
				QueryOrdersNotEvaluated().then(res=>{
					console.log("未评价",res);
					this.NotEvaluated = res.rows
					console.log("三十",this.NotEvaluated );
					this.csListArrl = this.csListArrl.concat(this.NotEvaluated)
					// console.log("");
					console.log("未评价2", this.csListArrl);
					this.csListArrl = this.csListArrl.map(item => {
						if (!item.hasOwnProperty('right')) {
							return {
								...item,
								right: 0,	
							}
						} else {
							return item
						}
								
					})
					var aaa = []
					console.log("未评价3", this.csListArrl);
					this.csListArrl[0].pocketVos.map(item=> {
						console.log('aaaaaa', item);
						// aaa = aaa.push(item)
						aaa = [...aaa,...item.goodsVos]
						// return {
						// 	aaa
						// }
					})
					console.log('asd', aaa);
					this.aaa = aaa
				})
			},
			//获取全部订单
			getAllOrder(){
				getAllOrder().then(res=>{
					console.log("res",res);
					this.getAllOrderList = res.data.rows
					console.log("来了",this.getAllOrderList);
					// console.log("欧冠",this.getAllOrderList.pocketVo.orderListGoodsVo.goodsName);
					
					this.getAllOrderList.map(item=>{
						let goods = this.getAllOrderList.map(item=>item.pocketVo).map(item=>item[0].orderListGoodsVo).reduce((prev,next)=>next.concat(prev))
						item.goods=goods
					})
					console.log("来咯",this.getAllOrderList);
					console.log("商品",this.getAllOrderList[0].goods[0].goodsName);
				})
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			// 评价去订单详情
			goOrderDetailYes(item){
				// uni.setStorage({
				// 	key:"YesOrderId",
				// 	data:this.getAllOrderList
				// })
				uni.navigateTo({
					url:"/pages/OrderDetails/OrderDetails?id="+item
				})
			},
			//未评价去订单详情
			goOrderDetail(item){
				// uni.setStorage({
				// 	key:"NoOrderId",
				// 	data:this.csListArrl,
					
				// })
				// console.log("OPP",this.csListArrl);
				uni.navigateTo({
					url:"/pages/OrderDetails/OrderDetails?id="+item
				})
			},
			//开始触摸滑动
			drawStart(e) {
				console.log("开始触发");
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				console.log("滑动");
				for (var index in this.csListArrl) {
					this.$set(this.csListArrl[index], 'right', 0);
				}
				var touch = e.touches[0];
				var item = this.csListArrl[e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;
				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', disX);
				} else {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				console.log("滑动结束");
				var item = this.csListArrl[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					console.log(item.right)
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', this.delBtnWidth);
				} else {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			//删除方法
			delData(item) {
				console.log("删除")
				uni.showModal({
					title: '提示',
					content: "确认删除该人员？",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	/deep/.segmented-control__text {
 
		color: #8c8c8c;
	}
	//全部订单
	.allorder{
		width: 702rpx;
		height: 340rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-top: 24rpx;
		margin-left: 24rpx;
		position: relative;
		
		.allorder-top{
			width: 702rpx;
			height: 32rpx;
			display: flex;
			margin-top: 24rpx;
			.allorder-top-font{
				width: 128rpx;
				height: 32rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 32rpx;
				color: #000000;
				margin-top: 24rpx;
				margin-left: 24rpx;
			}
			.allorder-top-time{
				width: 248rpx;
				height: 24rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #8C8C8C;
				margin-top: 30rpx;
				margin-left: 24rpx;

			}
			.allorder-top-jiantou{
				color: #8C8C8C;
				margin-top: 12rpx;
				margin-left: 220rpx;
				
			}
		}
		
		
		.allorder-bottom{
			height: 182rpx;
			width: 702rpx;
			display: flex;
			// background-color: #8C8C8C;
			margin-top: 50rpx;
			
		}
		.allorder-bottom-content{
			width: 500rpx;
			height: 182rpx;
			// background-color: aqua;
			display: flex;
			overflow: hidden;
			.allorder-bottom-content-yes{
				height: 182rpx;
				width:128rpx;
				margin-left: 24rpx;
				// background-color: antiquewhite;	
				.allorder-bottom-content-pic{
					width: 128rpx;
					height: 128rpx;
					
					image{
						width: 128rpx;
						height: 128rpx;
						background-size: 100%;
					}
				}
				.allorder-bottom-content-name{
					width: 96rpx;
					height: 24rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 24rpx;
					color: #000000;
					margin-top: 12rpx;
					margin-left: 12rpx;
				}
			}
			
		}
		.allorder-bottom-shu{
			background-color: #FFFFFF;
			width: 202rpx;
			height: 182rpx;
			.allorder-bottom-fone{
				width: 120rpx;
				height: 28rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 14px;
				line-height: 14px;
				color: #000000;
				margin-top: 50rpx;
				margin-left: 50rpx;
			}
			.allorder-bottom-money{
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 14px;
				line-height: 14px;
				text-align: center;
				color: #FB7A42;
				margin-top: 18%;
				
			}
		}
		
		.allorder-state{
			position: absolute;
			width: 100%;
			height: 36rpx;
			top: 270rpx;
			left: 450rpx;
			margin-left: 50rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 36rpx;
			line-height: 36rpx;
			// text-align: left;
			color: #FB7A42;
			
		}
	}
	
	//未评价
.main {
		// width: 100%;
		height: auto;
		margin: 10px auto;
		overflow: hidden
	}

	.order-item {
		width: 100%;
		height: 340rpx;
		// display: flex;
		position: relative;
		margin: 10px auto;
		align-items: right;
		// flex-direction: row;
	}

	.contenttwo {
		width: 702rpx;
		height: 340rpx;
		margin: 0 auto;
		// background-color: #FB7A42;
		.allordertwo{
			width: 702rpx;
			height: 340rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin-top: 24rpx;
			// margin-left: 24rpx;
			position: relative;
			.allorder-top{
				width: 702rpx;
				height: 32rpx;
				display: flex;
				margin-top: 24rpx;
				.allorder-top-font{
					width: 128rpx;
					height: 32rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 500;
					font-size: 32rpx;
					line-height: 32rpx;
					color: #000000;
					margin-top: 24rpx;
					margin-left: 24rpx;
				}
				.allorder-top-time{
					width: 248rpx;
					height: 24rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 24rpx;
					color: #8C8C8C;
					margin-top: 30rpx;
					margin-left: 24rpx;
			
				}
				.allorder-top-jiantou{
					color: #8C8C8C;
					margin-top: 12rpx;
					margin-left: 220rpx;
					
				}
			}
			
			
			.allorder-bottom{
				height: 182rpx;
				width: 702rpx;
				display: flex;
				// background-color: #8C8C8C;
				margin-top: 50rpx;
				
			}
			.allorder-bottom-content{
				width: 500rpx;
				height: 182rpx;
				// background-color: aqua;
				display: flex;
				overflow: hidden;
				.allorder-bottom-content-yes{
					height: 182rpx;
					width:128rpx;
					margin-left: 24rpx;
					// background-color: antiquewhite;	
					.allorder-bottom-content-pic{
						width: 128rpx;
						height: 128rpx;
						
						image{
							width: 128rpx;
							height: 128rpx;
							background-size: 100%;
						}
					}
					.allorder-bottom-content-name{
						width: 96rpx;
						height: 24rpx;
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 24rpx;
						line-height: 24rpx;
						color: #000000;
						margin-top: 12rpx;
						margin-left: 12rpx;
					}
				}
				
			}
			.allorder-bottom-shu{
				background-color: #FFFFFF;
				width: 202rpx;
				height: 182rpx;
				.allorder-bottom-fone{
					width: 120rpx;
					height: 28rpx;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 14px;
					line-height: 14px;
					color: #000000;
					margin-top: 50rpx;
					margin-left: 50rpx;
				}
				.allorder-bottom-money{
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 500;
					font-size: 14px;
					line-height: 14px;
					text-align: center;
					color: #FB7A42;
					margin-top: 18%;
					
				}
			}
			
			.allorder-state{
				position: absolute;
				width: 500rpx;
				height: 56rpx;
				top: 270rpx;
				left: 310rpx;
				// background-color: #8c8c8c;
				display: flex;
				.allorder-state-anotherorder{
					height: 56rpx;
					width: 164rpx;
					border: 1px solid #FB7A42;
					border-radius: 16px;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 56rpx;
					text-align: center;
					color: #FB7A42;
				}
				.allorder-state-immediateevaluation{
					height: 56rpx;
					width: 164rpx;
					background: #FB7A42;
					border-radius: 16px;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 56rpx;
					text-align: center;
					color: #FFFFFF;
					margin-left: 20rpx;
				}
				
			}
		}
		
	}

	.remove {
		// margin-left: -5%;
		width: 160rpx;
		height: 100%;
		background-color: #FF4D26;
		color: #FFFFFF;
		position: absolute;
		top: 0;
		right: -160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
	}
	.chargeback{
		.chargeback-img{
			width: 380rpx;
			height: 302rpx;
			background: url("@/static/image 56.png");
			background-size: 100%;
			margin-top: 100rpx;
			margin-left: 188rpx;
		}
		.no-order{
			width: 144rpx;
			height: 36rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 36rpx;
			line-height: 36rpx;
			color: #AAAAAA;
			margin-top: 32rpx;
			margin-left: 304rpx;
		}
	}
	
	
</style>